<template>
  <div>
    <el-dialog title="新增接警人" :visible.sync="dialogVisible" width="500px" :before-close="closeDialog"
      :close-on-click-modal="false" :append-to-body="true" top="10vh">
      <el-form :model="addForm" :rules="rules" ref="refForm" label-width="90px">
        <el-form-item size="small" label="组织机构" prop="parentId"
          v-if="user.roleName === 'TENANT_ADMIN' || user.roleName === 'ORG_ADMIN'">
          <TreeSearchAdd style="width: 100%" @changeOrgId="changeOrgId" @onClear="onClear" ref="refTreeSearchAdd">
          </TreeSearchAdd>
        </el-form-item>
        <el-form-item size="small" label="联网单位" prop="orgId">
          <el-select size="small" style="width: 100%;" clearable v-loadMore="loadMore" v-model='addForm.orgId'
            placeholder='请选择' filterable remote :remote-method="remoteMethod" @clear="handleClear"
            @change="changeunitId">
            <el-option v-for='item in orgList' :label='item.orgName' :value='item.id' :key='item.id'>
            </el-option>
            <div class="div_box" v-loading="loading" :style="loading ? '' : 'display: none;'"> </div>
          </el-select>
        </el-form-item>
        <el-form-item size="small" label="建筑物" prop="buildId">
          <el-select clearable filterable v-model="addForm.buildId" placeholder="请选择" style="width: 100%"
            @change="changeBuild" v-loadMore="loadMore2">
            <el-option v-for="item in buildList" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
            <div class="div_box" v-loading="loading2" :style="loading2 ? '' : 'display: none;'"></div>
          </el-select>
        </el-form-item>
        <el-form-item size="small" label="楼层" prop="floorId" v-if="flag">
          <el-select clearable filterable v-model="addForm.floorId" placeholder="请选择" style="width: 100%"
            @change="changeFloor" v-loadMore="loadMore3">
            <el-option v-for="item in floorList" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
            <div class="div_box" v-loading="loading3" :style="loading3 ? '' : 'display: none;'"></div>
          </el-select>
        </el-form-item>
        <el-form-item size="small" label="安装点" prop="spaceId" v-if="spflag">
          <el-select clearable filterable v-model="addForm.spaceId" placeholder="请选择" style="width: 100%"
            v-loadMore="loadMore4">
            <el-option v-for="item in spaceList" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
            <div class="div_box" v-loading="loading4" :style="loading4 ? '' : 'display: none;'"></div>
          </el-select>
        </el-form-item>

        <el-form-item size="small" label="接警人级别" prop="level">
          <el-select v-model="addForm.level" placeholder="请选择" style="width: 100%">
            <el-option v-for="item in levelList" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item size="small" label="姓名" prop="name">
          <el-input clearable placeholder="请输入" maxlength="20" v-model.trim="addForm.name">
          </el-input>
        </el-form-item>
        <el-form-item size="small" label="联系电话" prop="mobile">
          <el-input clearable placeholder="请输入" maxlength="12" v-model.trim="addForm.mobile">
          </el-input>
        </el-form-item>
        <el-form-item size="small" label="通知方式" prop="notifyType">
          <el-checkbox-group v-model="addForm.notifyType">
            <el-checkbox label="语音" text-color="#ff00ff"></el-checkbox>
            <el-checkbox label="短信"></el-checkbox>
            <el-checkbox label="公众号"></el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <div class="tip">
          <div class="title"><span style="color: red">* </span>温馨提示：</div>
          <!-- <span class="txt">1.请输入姓名和手机号，同时确保此用户的姓名和手机号已登记和关联到系统中的单位。</span> -->
          <span class="txt">1.请确保填写的报警号码正确有效。</span>
          <span class="txt">2.当一级接警人全部没有接听电话的情况下，会发送给二级接警人，以此类推。</span>
          <span class="txt">3.二、三、四级接警人只能接收到电话短信通知，没有公众号推送。</span>
        </div>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="closeDialog" class="cancel-button">取 消</el-button>
        <el-button size="small" @click="submit" v-preventReClick="1000" class="confirm-button">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  reqOrgList,
  reqSpaceManager,
  reqAlarmReceiverAdd,
  reqAlarmReceiverList,
} from "@/api/api";
import rulesMixin from "../mixins/rules.js";
import { mapState } from "vuex";
import loadMore from "@mixin/loadMore";
import TreeSearchAdd from "@components/TreeSearchAdd.vue";

export default {
  props: [],
  components: {
    TreeSearchAdd,
  },
  mixins: [rulesMixin, loadMore],
  data() {
    return {
      buildflag: false,
      flag: false,
      spflag: false,
      dialogVisible: false,
      orgList: [],
      buildList: [],
      floorList: [],
      spaceList: [],
      addForm: {
        parentId: "",
        orgId: "",
        buildId: "",
        floorId: "",
        spaceId: "",
        name: "",
        mobile: "",
        notifyType: [],
        level: 1,
      },
      levelList: [
        {
          id: 1,
          name: "一级",
        },
        {
          id: 2,
          name: "二级",
        },
        {
          id: 3,
          name: "三级",
        },
        {
          id: 4,
          name: "四级",
        },
      ],
      sysInstanceIndex: 1,
      sysInstanceTotalPages: 10,
      loading: false,
      sysInstanceIndex2: 1,
      sysInstanceTotalPages2: 10,
      loading2: false,
      sysInstanceIndex3: 1,
      sysInstanceTotalPages3: 10,
      loading3: false,
      sysInstanceIndex4: 1,
      sysInstanceTotalPages4: 10,
      loading4: false,
    };
  },
  computed: { ...mapState(["user"]) },
  watch: {
    dialogVisible(e) {
      if (e) {
        // this.getBuildList()
        this.$nextTick(() => {
          if (this.$refs.refTreeSearchAdd) {
            this.$refs.refTreeSearchAdd.getDataList();
          }
        });
      }
    },
  },
  mounted() { },
  methods: {
    changeOrgId(instanceId) {
      this.addForm.parentId = instanceId.id
      this.handleClear();
      // this.addForm.orgId = instanceId.id;
      // this.buildflag = true;
      // this.buildList = this.floorList = this.spaceList = [];
      // this.addForm.buildId = this.addForm.floorId = this.addForm.spaceId = "";
      // this.sysInstanceIndex2 = 1;
      // this.sysInstanceTotalPages2 = 10;
      // this.sysInstanceIndex3 = 1;
      // this.sysInstanceTotalPages3 = 10;
      // this.sysInstanceIndex4 = 1;
      // this.sysInstanceTotalPages4 = 10;
      // this.getBuildList();
    },
    onClear() {
      this.addForm.parentId = ''
      this.handleClear();
      // this.addForm.orgId = "";
      // this.buildflag = true;
      // this.buildList = this.floorList = this.spaceList = [];
      // this.addForm.buildId = this.addForm.floorId = this.addForm.spaceId = "";
      // this.sysInstanceIndex2 = 1;
      // this.sysInstanceTotalPages2 = 10;
      // this.sysInstanceIndex3 = 1;
      // this.sysInstanceTotalPages3 = 10;
      // this.sysInstanceIndex4 = 1;
      // this.sysInstanceTotalPages4 = 10;
    },
    changeunitId() {
      this.buildflag = true;
      this.buildList = this.floorList = this.spaceList = [];
      this.addForm.buildId = this.addForm.floorId = this.addForm.spaceId = "";
      this.sysInstanceIndex2 = 1;
      this.sysInstanceTotalPages2 = 10;
      this.sysInstanceIndex3 = 1;
      this.sysInstanceTotalPages3 = 10;
      this.sysInstanceIndex4 = 1;
      this.sysInstanceTotalPages4 = 10;
      this.getBuildList();
    },
    // 清空
    handleClear() {
      this.orgName = '';
      this.sysInstanceIndex = 1;
      this.sysInstanceTotalPages = 10;
      this.orgList = []
      this.getOrgList()

      this.addForm.orgId = "";
      this.buildflag = true;
      this.buildList = this.floorList = this.spaceList = [];
      this.addForm.buildId = this.addForm.floorId = this.addForm.spaceId = "";
      this.sysInstanceIndex2 = 1;
      this.sysInstanceTotalPages2 = 10;
      this.sysInstanceIndex3 = 1;
      this.sysInstanceTotalPages3 = 10;
      this.sysInstanceIndex4 = 1;
      this.sysInstanceTotalPages4 = 10;
    },
    // 远程搜索
    async remoteMethod(query) {
      this.addForm.orgId = query //保留输入的值
      this.orgName = query;
      this.sysInstanceIndex = 1;
      this.sysInstanceTotalPages = 10;
      this.orgList = []
      this.getOrgList()
    },
    async loadMore() {
      if (this.sysInstanceIndex >= Math.ceil(this.sysInstanceTotalPages / 10)) return
      this.sysInstanceIndex++
      this.loading = true;
      // 获取列表数据的方法
      await this.getOrgList()
      this.loading = false;
    },
    // 请求单位列表
    async getOrgList() {
      let { tenantId, userId, roleName } = this.user;
      const res = await reqOrgList({
        tenantId,
        userId,
        roleName,
        orgName: this.orgName,
        parentId: this.addForm.parentId,
        type: "4"
      });
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      this.orgList = res.data.rows
    },

    // 选择单位
    changeOrg() {
      this.buildflag = true;
      this.buildList = this.floorList = this.spaceList = [];
      this.addForm.buildId = this.addForm.floorId = this.addForm.spaceId = "";
      this.sysInstanceIndex2 = 1;
      this.sysInstanceTotalPages2 = 10;
      this.sysInstanceIndex3 = 1;
      this.sysInstanceTotalPages3 = 10;
      this.sysInstanceIndex4 = 1;
      this.sysInstanceTotalPages4 = 10;
      this.getBuildList();
    },

    async loadMore2() {
      if (this.sysInstanceIndex2 >= Math.ceil(this.sysInstanceTotalPages2 / 10))
        return;
      this.sysInstanceIndex2++;
      this.loading2 = true;
      // 获取列表数据的方法
      await this.getBuildList();
      this.loading2 = false;
    },
    // 获取建筑物列表
    async getBuildList() {
      let res = await reqSpaceManager(this.sysInstanceIndex2, 10, {
        userId: this.user.userId,
        roleName: this.user.roleName,
        orgId: this.addForm.orgId,
        metaCode: 1,
        isStatistics: 0,
        // include:1,//是否包含下级0包含 1不包含
      });
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      this.sysInstanceTotalPages2 = res.data.total;
      this.buildList = [...this.buildList, ...res.data.rows];
    },
    // 选择建筑物
    changeBuild() {
      this.flag = true;
      this.floorList = [];
      this.spaceList = [];
      this.addForm.floorId = this.addForm.spaceId = "";
      this.sysInstanceIndex3 = 1;
      this.sysInstanceTotalPages3 = 10;
      this.sysInstanceIndex4 = 1;
      this.sysInstanceTotalPages4 = 10;
      this.getFloorList();
    },

    async loadMore3() {
      if (this.sysInstanceIndex3 >= Math.ceil(this.sysInstanceTotalPages3 / 10))
        return;
      this.sysInstanceIndex3++;
      this.loading3 = true;
      // 获取列表数据的方法
      await this.getFloorList();
      this.loading3 = false;
    },
    // 获取楼层列表
    async getFloorList() {
      let res = await reqSpaceManager(this.sysInstanceIndex3, 10, {
        userId: this.user.userId,
        roleName: this.user.roleName,
        orgId: this.addForm.orgId,
        parentId: this.addForm.buildId,
        metaCode: 2,
        isStatistics: 0,
      });
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      this.sysInstanceTotalPages3 = res.data.total;
      this.floorList = [...this.floorList, ...res.data.rows];
    },
    // 选择楼层
    changeFloor() {
      this.sysInstanceIndex4 = 1;
      this.sysInstanceTotalPages4 = 10;
      this.spflag = true;
      this.getSpaceList();
      this.spaceList = [];
      this.addForm.spaceId = "";
    },

    async loadMore4() {
      if (this.sysInstanceIndex4 >= Math.ceil(this.sysInstanceTotalPages4 / 10))
        return;
      this.sysInstanceIndex4++;
      this.loading4 = true;
      // 获取列表数据的方法
      await this.getSpaceList();
      this.loading4 = false;
    },
    // 获取安装点列表
    async getSpaceList() {
      let res = await reqSpaceManager(this.sysInstanceIndex4, 10, {
        userId: this.user.userId,
        roleName: this.user.roleName,
        orgId: this.addForm.orgId,
        parentId: this.addForm.floorId,
        metaCode: 3,
        isStatistics: 0,
      });
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      this.sysInstanceTotalPages4 = res.data.total;
      this.spaceList = [...this.spaceList, ...res.data.rows];
    },
    // 点击确定
    submit() {
      this.$refs.refForm.validate(async (valid) => {
        if (!valid) return;
        let { orgId, spaceId, name, mobile, notifyType, level } = this.addForm;
        if (this.addForm.spaceId == "" && this.addForm.floorId == "") {
          spaceId = this.addForm.buildId;
        } else if (this.addForm.spaceId == "") {
          spaceId = this.addForm.floorId;
        }
        let mobileReceive = notifyType.indexOf("语音") !== -1 ? 1 : 0;
        let msgReceive = notifyType.indexOf("短信") !== -1 ? 1 : 0;
        let mpReceive = notifyType.indexOf("公众号") !== -1 ? 1 : 0;
        let params = {
          orgId: this.addForm.orgId,
          spaceId,
          name,
          mobile,
          mobileReceive,
          msgReceive,
          mpReceive,
          level,
        };
        this.reqAddFun(params);
      });
    },
    // 接口请求
    async reqAddFun(params) {
      const res = await reqAlarmReceiverAdd(params);
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      this.$modal.notifySuccess("新增成功");
      // this.$refs.refForm.resetFields();
      this.closeDialog();
      this.$parent.getDataList();
    },
    // 点击关闭弹框
    closeDialog() {
      this.orgList = [];
      this.buildList = [];
      this.floorList = [];
      this.spaceList = [];
      this.addForm.orgId = "";
      this.sysInstanceIndex = 1;
      this.sysInstanceTotalPages = 10;
      this.sysInstanceIndex2 = 1;
      this.sysInstanceTotalPages2 = 10;
      this.sysInstanceIndex3 = 1;
      this.sysInstanceTotalPages3 = 10;
      this.sysInstanceIndex4 = 1;
      this.sysInstanceTotalPages4 = 10;
      this.spflag = false;
      this.flag = false;
      this.buildflag = false;
      this.$refs.refForm.resetFields();
      this.selectedProvinceCityArea = [];
      this.dialogVisible = false;
      if (this.$refs.refTreeSearchAdd) {
        this.$refs.refTreeSearchAdd.onclose(); //清空组织机构
      }
    },
  },

  deactivated() {
    if (this.$refs.refForm != null) {
      this.closeDialog();
    }
  },
};
</script>

<style lang="less" scoped>
@import url("../../common.less");

.tip {
  width: 98%;
  margin-left: 10px;
  display: flex;
  flex-direction: column;

  .title {
    color: @primaryTxtcolor;
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 5px;
  }

  .txt {
    width: 96%;
    font-size: 11px;
    // color: @primaryTxtcolor;
    color: #999;
    line-height: 24px;
    margin-left: 10px;
  }
}

::v-deep .el-checkbox__input.is-checked .el-checkbox__inner,
::v-deep .el-checkbox__input.is-indeterminate .el-checkbox__inner {
  background-color: #7367f0 !important;
  border: 1px solid #7367f0 !important;
}

::v-deep .el-checkbox__inner:hover {
  border-color: #7367f0;
}

::v-deep .el-checkbox__input.is-checked+.el-checkbox__label {
  color: #7367f0;
}

::v-deep .el-checkbox__input.is-focus .el-checkbox__inner {
  border-color: #7367f0 !important;
}

// 下拉框加载开始
.div_box {
  height: 276px;
  position: absolute;
  top: -1px;
  left: -1px;
  width: 100%;
  z-index: 2016;
  // background: red;
  // opacity: 0.5;
}

::v-deep .el-loading-mask {
  border-radius: 4px;
}

// 下拉框加载结束

.orgNameclass {
  color: @primaryThemeTxtColor2;
}

.el-checkbox {
  color: @primaryBorderColor5;
}
</style>
